<template>

  <el-dialog
    v-loading="loading"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    width="800px"
    @close="dialogClose"
  >

    <div style="padding:20px">

      <el-row :gutter="20" style="margin-bottom: 30px">
        <el-col :span="3" style="line-height: 36px">选择题库</el-col>
        <el-col :span="9"> <repo-select v-model="repoForm.repoId" :is-exam="true" style="width: 100%" @change="repoChange" /></el-col>
        <el-col :span="3" style="line-height: 36px">选择题型</el-col>
        <el-col :span="9"> <dic-list-select v-model="repoForm.quType" dic-code="qu_type" style="width: 100%" disabled /></el-col>
      </el-row>

      <el-row v-for="cp in repoForm.groups" :key="cp.id" :gutter="20">

        <el-row>
          <el-col style="font-weight: 700; font-size: 14px">{{ cp.title }}</el-col>
        </el-row>

        <el-row v-for="item in cp.levels" :key="item.id">
          <el-col :span="6" class="tt">{{ item.title }}</el-col>
          <el-col :span="18" class="tt">抽取<el-input-number v-model="item.num" :max="item.quCount" :min="0" size="mini" />题/总{{ item.quCount }}题</el-col>
        </el-row>

      </el-row>

    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogClose">取 消</el-button>
      <el-button type="primary" @click="handleConfirm">确 定</el-button>
    </div>

  </el-dialog>

</template>

<script>

import RepoSelect from '@/components/RepoSelect'
import DicListSelect from '@/components/DicListSelect'
import { chapterGroup } from '@/api/repo/repo'

export default {
  name: 'Join3Dialog',
  components: {
    DicListSelect,
    RepoSelect
  },
  props: {
    quType: String,

    visible: {
      type: Boolean,
      default: false
    },
    excludes: Array
  },
  data() {
    return {
      loading: false,
      repoForm: {
        repoTitle: '',
        groups: []
      },
      dialogVisible: false
    }
  },
  watch: {

    // 检测查询变化
    visible: {
      handler(val) {
        this.dialogVisible = val
      }
    },

    // 检测查询变化
    quType: {
      handler(val) {
        if (val != null && val != '') {
          this.repoForm.quType = val
          this.handleTypeGroup()
        }
      }
    },
    // 检测查询变化
    excludes: {
      handler(val) {
        this.repoForm.excludes = val
        this.handleTypeGroup()
      },
      deep: true
    },
    // 重新选择题库
    'repoForm.repoId': function() {
      this.handleTypeGroup()
    }
  },

  created() {
    this.dialogVisible = this.visible
    this.repoForm.quType = this.quType
  },
  methods: {

    dialogClose() {
      this.dialogVisible = false
      this.$emit('update:visible', false)
      this.$emit('close')
    },

    repoChange(e, title) {
      this.repoForm.repoTitle = title
    },

    handleTypeGroup() {
      // 情况
      this.repoForm.groups = []

      // 必须查找
      if (!this.repoForm.quType || !this.repoForm.repoId) {
        return
      }

      chapterGroup(this.repoForm).then(res => {
        const groups = []

        // 回填结构化信息
        for (let i = 0; i < res.data.length; i++) {
          const item = res.data[i]
          const levels = item.levels
          for (let j = 0; j < levels.length; j++) {
            this.$set(levels[j], 'num', 0)
          }
          // 重设数据
          item.levels = levels
          item.quType = this.repoForm.quType
          item.repoId = this.repoForm.repoId

          groups.push(item)
        }

        this.repoForm.groups = groups
      })
    },

    handleConfirm() {
      // 分组数据
      const groups = JSON.parse(JSON.stringify(this.repoForm.groups))

      // 回调的列表
      const ruleList = []
      // 回填结构化信息
      for (let i = 0; i < groups.length; i++) {
        const item = groups[i]
        const levels = item.levels
        for (let j = 0; j < levels.length; j++) {
          const rule = levels[j]
          if (rule.num > 0) {
            rule.quType = item.quType
            rule.repoId = item.repoId
            rule.repoTitle = this.repoForm.repoTitle
            rule.levelTitle = rule.title
            rule.chapterTitle = item.title
            rule.chapterId = item.chapterId
            ruleList.push(rule)
          }
        }
      }

      // 直接返回规则
      this.loading = true
      this.$emit('update:visible', false)
      this.$emit('select', ruleList)
      this.loading = false
    }
  }
}
</script>

<style scoped>

.el-row .tt{
  font-size: 14px;
  color: #606266;
  line-height: 24px;
}

.el-row .el-input-number{
  margin: 0px 10px 0px 10px;
}

.el-row {
  margin-bottom: 10px;
&:last-child {
   margin-bottom: 0;
 }
}

</style>
